<template>
	<view class="particulars">
		<view class="particulars-returns">
			<view class="left" @tap="returnBtn"><image src="/static/gerendian/fanhui.png" mode=""></image></view>
			<view class="right" @tap="shareBtn"><image src="/static/gerendian/fenxiang.png" mode=""></image></view>
		</view>
		<view class="particulars-imga" v-if="imgType==='1'">
			<image src="/static/gerendian/tzgrd.png" mode=""></image>
		</view>
		<view class="particulars-imgb" v-else-if="imgType==='2'">
			<image src="/static/gerendian/tzsd.png" mode=""></image>
		</view>
		<view class="particulars-imgc" v-else>
			<image src="/static/gerendian/jrhhr.png" mode=""></image>
		</view>
		<view class="particulars-btn">
			<view class="achieve" :class="{'cloBlue':imgType==='2'}" @tap="listBtn">已成功邀请</view>
			<view class="addbtn" :class="{'bgBlue':imgType==='2'}" @tap="shareBtn">邀请加入</view>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="modal">
				<view class="modal-matter">
					<view class="list" v-for="(item,index) in shareList" :key="index">
						<view class="icon"><image :src="item.icon" mode=""></image></view>
						<view class="title">{{item.title}}</view>
					</view>
				</view>
				<view class="modal-cancelBtn" @tap="cancelBtn">取消</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/src/pages/components/uni-popup/uni-popup.vue';
	export default{
		components: { uniPopup },
		data(){
			return{
				imgType:0,
				shareList:[
					{title:'朋友圈',icon:'/static/gerendian/pyq.png'},
					{title:'微信好友',icon:'/static/gerendian/wx.png'},
					{title:'微博',icon:'/static/gerendian/wb.png'},
					{title:'QQ',icon:'/static/gerendian/qq.png'},
					{title:'复制链接',icon:'/static/gerendian/lj.png'}
				]
			}
		},
		onLoad(option) {
			this.imgType = option.type
			console.log(option.type)
		},
		methods:{
			returnBtn(){ // 返回
				this.$utils.common.navigateBack()
			},
			shareBtn(){ // 分享
				this.$refs.popup.open()
			},
			cancelBtn(){ // 分享取消
				this.$refs.popup.close();
			},
			listBtn(){ // 已邀请列表
				uni.navigateTo({
					url:'../../../my/pages/unitShop/index?id='+this.imgType
				})
			}
		}
	}
</script>

<style lang="scss">
	.particulars{
		width: 100%;
		.modal{
			width:100%;
			height:324rpx;
			background:rgba(255,255,255,1);
			opacity:1;
			border-radius:20rpx 20rpx 0rpx 0rpx;
			&-cancelBtn{
				width:100%;
				height:104rpx;
				background:rgba(245,245,247,1);
				font-size:34rpx;
				font-family:PingFang SC;
				font-weight:400;
				line-height:104rpx;
				color:rgba(98,100,112,1);
				text-align: center;
				opacity:1;
			}
			&-matter{
				display: flex;
				align-items: center;
				text-align: center;
				padding: 60rpx 40rpx 28rpx 40rpx;
				.list{
					flex: 1;
					.icon{
						// width:88rpx;
						// height:88rpx;
						image{
							width:88rpx;
							height:88rpx;
						}
					}
					.title{
						font-size:24rpx;
						font-family:PingFang SC;
						font-weight:400;
						color:rgba(98,100,112,1);
						opacity:1;
						margin-top: 8rpx;
					}
				}
			}
		}
		&-btn{
			width: 100%;
			height:96rpx;
			opacity:1;
			display: flex;
			align-items: center;
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 97;
			text-align: center;
			
			.achieve{
				width:320rpx;
				height:96rpx;
				font-size:32rpx;
				font-family:PingFang SC;
				font-weight:400;
				line-height:92rpx;
				color:rgba(32,170,200,1);
				// letter-spacing:60px;
				opacity:1;
				background-color: #FFFFFF;
			}
			.addbtn{
				width:430rpx;
				height:96rpx;
				background:rgba(252,175,3,1);
				font-size:36rpx;
				font-family:PingFang SC;
				font-weight:500;
				line-height:92rpx;
				color:rgba(255,255,255,1);
				// letter-spacing:60px;
				opacity:1;
			}
			.cloBlue{
				color: rgba(30, 108, 214, 1);
			}
			.bgBlue{
				background-color: rgba(30, 108, 214, 1);
				color: #FFFFFF;
			}
		}
		&-returns{
			position: fixed;
			width: 100%;
			height: 64rpx;
			top: 100rpx;
			left: 0;
			display: flex;
			padding: 0 30rpx;
			z-index: 97;
			.left{
				width:64rpx;
				height:64rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.right{
				width:64rpx;
				height:64rpx;
				margin-left: auto;
				image{
					width: 100%;
					height: 100%;
				}
			}
		}
		&-imga{
			width: 100%;
			height: 5000rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		&-imgb{
			width: 100%;
			height: 1554rpx;
			overflow: hidden;
			image{
				width: 100%;
				height: 1624rpx;
			}
		}
		&-imgc{
			width: 100%;
			height: 7000rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
	}
</style>
